<template>
    <div class="topbar">
        <header>
            <span class="iconfont " @click="prev()">
                <van-icon name="arrow-left" />
            </span>
            <span class="iconfont sp3" @click="onSelect(option)"><van-icon name="share-o"  @click="showShare = true" />
                    <van-share-sheet
                    v-model="showShare"
                    title="立即分享给好友"
                    :options="options"
                    @select="onSelect"
                />
            </span>
        </header>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    data(){
         return {
            showShare: false,
            options: [
                { name: '微信', icon: 'wechat' },
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
            ],
         }
     },
    methods:{
        onSelect(option) {
            Toast(option.name);
            this.showShare = false;
        },
        prev(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
    .topbar{
        font-size: 0.12rem;
    }
    header{
        display: flex;
        justify-content: space-between;
        padding:0.05rem 0.1rem;
        height: 0.5rem;
        line-height: 0.5rem;
        background-color: rgba(0,0,0,0.1);
        color: red;
        font-size: 0.2rem;
    }
</style>